$(document).ready(function(){
    
})
$(".yui3-g").ready(function(){
    let goods = [];
    let pages = 0;
    let search_key = "";
    if(parseUrl().key!=undefined){
        search_key=parseUrl().key;
    }
    $.ajax({
        type:"get",
        async:false,
        url:`http://localhost:3301/goods?q=${search_key}`,
        success:function(data){
            pages = data.length;
        }
    })
    let max_index = pages%20!=0?parseInt(pages/20)+1:parseInt(pages/20);
    let index = 1;
    if(parseUrl().key!=""){
        $("#autocomplete").val(parseUrl().key);
    }
    if(parseUrl().page!=undefined){
        index = parseInt(parseUrl().page);
    }
    if(index<1){
        index=1;
    }else if(index>max_index){
        index = max_index;
    }
    $.ajax({
        type:"get",
        async:false,
        url:`http://localhost:3301/goods?_page=${index}&_limit=20&q=${search_key}`,
        success:function(data){
            goods = data;
        }
    })
    goods.forEach((e,i) => {
        let li = $(`<li class="yui3-u-1-5">
                <div class="list-wrap">
                    <div class="p-img">
                        <a href="item.html?id=${e.id}" target="_blank"><img src="${e.goods_logo}" /></a>
                    </div>
                    <div class="price">
                        <strong>
                                <em>¥</em>
                                <i>${e.goods_price}</i>
                            </strong>
                    </div>
                    <div class="attr">
                        <em>${e.goods_name}</em>
                    </div>
                    <div class="cu">
                        <em><span>促</span>满一件可参加超值换购</em>
                    </div>
                    <div class="commit">
                        <i class="command">已有2000人评价</i>
                    </div>
                    <div class="operate">
                        <a href="javascript:void(0);" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                        <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                        <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                    </div>
                </div>
            </li>`);	
            $(".goods-list .yui3-g").append(li);
    })
    for(let i = 0;i<max_index;i++){
        if(index==i+1){
            $("#pageNum").append($(`<a href class="cur" title="第 ${i+1} 页"="" page-index="${i+1}">${i+1}</a>`).css("pointer-events","none"));
        }else{
            $("#pageNum").append($(`<a href="#" title="第 ${i+1} 页"="" page-index="${i+1}">${i+1}</a>`));  
        }   
    }
    $("#page-next").attr("page-index",index+1);
    $("#page-prev").attr("page-index",index-1);
    $("#page-last").attr("page-index",max_index);
    if(index==max_index){
        $("#page-next").css("pointer-events","none");
    }
    if(index==1){
        $("#page-prev").css("pointer-events","none");
    }
    if(index==max_index){
        $("#page-last").css("pointer-events","none");
    }
    $(".pageRemark b:first").html(max_index);
    $(".pageRemark b:last").html(pages);
    $(".pagination a[page-index]").click(function(){
        console.log($(this).attr("page-index"));
        location.href = `list.html?key=${search_key}&page=${$(this).attr("page-index")}`;
        return false;
    })
    //对于加载失败的使用另一张图片代替
    $(".p-img img").error(function(){
        $(this).attr("src","../uploads/goods/fb7b968a62eb10ef.jpg");
    })
})